<template>
  <div class="about">
    <div class="container">
      <!-- 关于头部 -->
      <div class="about-header">
        <h1 class="about-title">关于 叶境</h1>
        <p class="about-subtitle">免费高清壁纸分享平台</p>
      </div>

      <!-- 关于内容 -->
      <div class="about-content">
        <div class="about-section">
          <h2>我们的使命</h2>
          <p>
            叶境 致力于为用户提供最优质的高清壁纸资源。我们收集来自世界各地的精美图片，
            涵盖风景、动漫、游戏、动物等多个分类，让每个人都能找到心仪的壁纸来美化自己的设备。
          </p>
        </div>

        <div class="about-section">
          <h2>平台特色</h2>
          <div class="features-grid">
            <div class="feature-card">
              <div class="feature-icon">🎨</div>
              <h3>高质量</h3>
              <p>所有壁纸都经过精心挑选，确保4K、8K超清画质</p>
            </div>
            <div class="feature-card">
              <div class="feature-icon">🆓</div>
              <h3>完全免费</h3>
              <p>所有壁纸资源完全免费，无需注册即可下载</p>
            </div>
            <div class="feature-card">
              <div class="feature-icon">📱</div>
              <h3>多设备支持</h3>
              <p>支持手机、平板、电脑等多种设备分辨率</p>
            </div>
            <div class="feature-card">
              <div class="feature-icon">🚀</div>
              <h3>快速下载</h3>
              <p>优化的下载系统，提供快速稳定的下载体验</p>
            </div>
          </div>
        </div>

        <div class="about-section">
          <h2>壁纸分类</h2>
          <div class="categories-grid">
            <div class="category-item">
              <h3>风景壁纸</h3>
              <p>世界各地的自然美景，从雪山到海洋，从森林到沙漠</p>
            </div>
            <div class="category-item">
              <h3>动漫壁纸</h3>
              <p>精选热门动漫作品，包含各种精美角色和场景</p>
            </div>
            <div class="category-item">
              <h3>游戏壁纸</h3>
              <p>热门游戏壁纸合集，包含各种游戏场景和角色</p>
            </div>
            <div class="category-item">
              <h3>动物壁纸</h3>
              <p>可爱的动物壁纸，从野生动物到宠物，应有尽有</p>
            </div>
            <div class="category-item">
              <h3>艺术壁纸</h3>
              <p>独特的抽象艺术壁纸，充满创意和想象力</p>
            </div>
            <div class="category-item">
              <h3>科幻壁纸</h3>
              <p>神秘的太空壁纸，包含星系、行星和宇宙奇观</p>
            </div>
          </div>
        </div>

        <div class="about-section">
          <h2>使用指南</h2>
          <div class="guide-steps">
            <div class="step">
              <div class="step-number">1</div>
              <div class="step-content">
                <h3>浏览分类</h3>
                <p>选择您喜欢的壁纸分类，如风景、动漫、游戏等</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">2</div>
              <div class="step-content">
                <h3>预览壁纸</h3>
                <p>点击壁纸缩略图查看大图，确认是否满意</p>
              </div>
            </div>
            <div class="step">
              <div class="step-number">3</div>
              <div class="step-content">
                <h3>下载使用</h3>
                <p>点击下载按钮，选择合适的分辨率下载壁纸</p>
              </div>
            </div>
          </div>
        </div>

        <div class="about-section">
          <h2>联系我们</h2>
          <div class="contact-info">
            <div class="contact-item">
              <h3>📧 邮箱</h3>
              <p>foliage2025@yeah.net</p>
            </div>
          </div>
        </div>

        <div class="about-section">
          <h2>常见问题</h2>
          <div class="faq-list">
            <div class="faq-item">
              <h3>壁纸是免费的吗？</h3>
              <p>是的，所有壁纸都是完全免费的，无需注册即可下载。</p>
            </div>
            <div class="faq-item">
              <h3>有些图片为什么占据位置却展示不了？</h3>
              <p>因为浏览器限制，我们正在解决这个问题，请耐心等待。</p>
            </div>
            <div class="faq-item">
              <h3>可以商用吗？</h3>
              <p>本站图片仅供学习，参考，交流使用，禁止用作商业用途。</p>
            </div>
            <div class="faq-item">
              <h3>如何上传自己的壁纸？</h3>
              <p>目前我们暂不支持用户上传，但欢迎通过邮箱联系我们。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 关于页面逻辑
</script>

<style scoped>
.about {
  padding: 2rem 0;
}

.about-header {
  text-align: center;
  margin-bottom: 4rem;
}

.about-title {
  font-size: 3rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 1rem;
}

.about-subtitle {
  font-size: 1.2rem;
  color: #64748b;
}

.about-content {
  max-width: 800px;
  margin: 0 auto;
}

.about-section {
  margin-bottom: 4rem;
}

.about-section h2 {
  font-size: 2rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 1.5rem;
  text-align: center;
}

.about-section p {
  color: #475569;
  line-height: 1.7;
  font-size: 1.1rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.feature-card {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.feature-card h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 1rem;
}

.feature-card p {
  color: #64748b;
  font-size: 1rem;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.category-item {
  background: #f8fafc;
  padding: 1.5rem;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

.category-item h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.category-item p {
  color: #64748b;
  font-size: 0.95rem;
}

.guide-steps {
  margin-top: 2rem;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.step-number {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}

.step-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.step-content p {
  color: #64748b;
  font-size: 1rem;
}

.contact-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.contact-item {
  text-align: center;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.contact-item h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 1rem;
}

.contact-item p {
  color: #64748b;
  font-size: 1rem;
}

.faq-list {
  margin-top: 2rem;
}

.faq-item {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.faq-item h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.faq-item p {
  color: #64748b;
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .about-title {
    font-size: 2rem;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .categories-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-info {
    grid-template-columns: 1fr;
  }
  
  .step {
    flex-direction: column;
    text-align: center;
  }
}
</style> 